<template>
  <div style="margin: 30px;">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="processInstanceId">
        <el-input v-model="formData.processInstanceId" placeholder="请输入processInstanceId" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-steps :active="activeStep" finish-status="success" process-status="process">
      <el-step
          v-for="step in processSteps"
          :key="step.taskId"
          :title="step.taskName"
          :description="step.assigneeName || step.assignee"
      />
    </el-steps>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getProcessInstanceDetail } from '@/api/workflow/processManager.js';

const formData = ref({processInstanceId:''})

onMounted(() => {
});

// 存储流程步骤数据
const processSteps = ref([]);

// 计算当前激活的步骤
const activeStep = computed(() => {
  const index = processSteps.value.findIndex(step => step.state === '进行中');
  return index === -1 ? processSteps.value.length : index;
});
const submit = () => {
  console.log(formData.value)
  getProcessInstanceDetail(formData.value).then(res => {
    console.log(res)
    // 按照 order 字段排序
    processSteps.value = res.data.sort((a, b) => a.order - b.order);
    console.log(processSteps.value);
  })
}
</script>

<style scoped lang="scss">

</style>